import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'my-webcomponent',
  template: `<div class="webcomponent-container">
  <h2>Angular Web Component</h2>
  <p>This component is created with Angular and exported as a Web Component.</p>
  <p *ngIf="name">Hello, {{ name }}!</p>
  <button (click)="onClick()">Click me</button>
  <p *ngIf="clicked">Button clicked!</p>
</div>`,
  styles: [
    `.webcomponent-container {
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 5px;
      max-width: 400px;
      margin: 0 auto;
    }
    h2 {
      color: #369;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 180%;
    }
    button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 10px 0;
      cursor: pointer;
      border-radius: 4px;
    }
    button:hover {
      background-color: #45a049;
    }`
  ]
}) export class MyWebComponent implements OnInit {
  @Input() name: string = '';
  clicked: boolean = false;

  ngOnInit() {
    console.log('Angular Web Component initialized');
  }

  onClick() {
    this.clicked = true;
    setTimeout(() => {
      this.clicked = false;
    }, 2000);
  }
}